<!--
  移动签批->公文详情->审批操作->附加公文
-->
<template>
	<view>
		<view style="color: rgb(0, 0, 255);font-weight:900;height: 30px;margin-top: 10px;">
			筛选
		</view>
		<div style="background-color: rgb(0, 0, 255);height:1.5px;width: 100%;margin: 0 auto;"></div>

		<van-form @submit="onSubmit">
			<van-field v-model="cbr" is-link label="呈报人" placeholder="请选择" />

			<van-field v-model="cbdw" is-link label="呈报单位" placeholder="请选择" />

			<van-cell title="选择日期区间" is-link :value="date" @click="show = true" />
			<van-calendar v-model="show" type="range" @confirm="onConfirm" />

			<van-cell is-link title="个性分类" v-model="gxflT" @click="xlShow = true" />
			<van-action-sheet v-model="xlShow" :actions="gxfl" cancel-text="取消" @select="onSelect" />

			<van-cell is-link title="公文类型" v-model="gwlxT" @click="lxShow = true" />
			<van-action-sheet v-model="lxShow" :actions="gwlx" cancel-text="取消" @select="onSelect2" />

			<van-cell is-link title="排序" v-model="gwlxT" @click="lxShow = true" />
			<van-action-sheet v-model="lxShow" :actions="gwlx" cancel-text="取消" @select="onSelect2" />

			<van-cell is-link title="公文状态" v-model="gwlxT" @click="lxShow = true" />
			<van-action-sheet v-model="lxShow" :actions="gwlx" cancel-text="取消" @select="onSelect2" />
		</van-form>

		<div class="follow">
			<van-button plain hairline type="info">取消</van-button>
			<van-button type="info" style="margin-left:10px;">提交</van-button>
		</div>

		<van-cell style="margin-top: 30rpx;">
			<view style="color: rgb(0, 0, 255);font-weight:900;height: 30px;margin-top: 10px;">
				查询结果
			</view>
			<div style="background-color: rgb(0, 0, 255);height:1.5px;width: 100%;margin: 0 auto;"></div>

			<van-cell>
				<view>
					<view>
						<van-checkbox v-model="sldRadio1" shape="square">收电0402-1</van-checkbox>
						<view class="btn2">收电批办</view>
					</view>
					<view class="btn1">2021-04-02</view>
				</view>
			</van-cell>
			<van-cell>
				<view>
					<view>
						<van-checkbox v-model="sldRadio2" shape="square">收电0402-2</van-checkbox>
						<view class="btn2">收电批办</view>
					</view>
					<view class="btn1">2021-04-02</view>
				</view>
			</van-cell>
			<van-cell>
				<view>
					<view>
						<van-checkbox v-model="sldRadio3" shape="square">收电0402-3</van-checkbox>
						<view class="btn2">收电批办</view>
					</view>
					<view class="btn1">2021-04-02</view>
				</view>
			</van-cell>
			<van-cell>
				<view>
					<view>
						<van-checkbox v-model="sldRadio4" shape="square">收电0402-4</van-checkbox>
						<view class="btn2">收电批办</view>
					</view>
					<view class="btn1">2021-04-02</view>
				</view>
			</van-cell>
			<van-cell>
				<view>
					<view>
						<van-checkbox v-model="sldRadio5" shape="square">收电0402-5</van-checkbox>
						<view class="btn2">收电批办</view>
					</view>
					<view class="btn1">2021-04-02</view>
				</view>
			</van-cell>
			<van-cell>
				<view>
					<view>
						<van-checkbox v-model="sldRadio6" shape="square">收电0402-6</van-checkbox>
						<view class="btn2">收电批办</view>
					</view>
					<view class="btn1">2021-04-02</view>
				</view>
			</van-cell>

			<van-loading align="center" type="spinner">正在加载....</van-loading>
		</van-cell>
		
		<div class="follow">
			<van-button plain hairline type="info">取消</van-button>
			<van-button type="info" style="margin-left:10px;">提交</van-button>
		</div>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				sldRadio1: '',
				sldRadio2: '',
				sldRadio3: '',
				sldRadio4: '',
				sldRadio5: '',
				sldRadio6: '',
				cbr: '',
				cbdw: '',
				date: '',
				show: false,
				xlShow: false,
				gxflT: "所有公文",
				gxfl: [{
						name: '我呈报的公文'
					}, {
						name: '我签批的公文'
					}, {
						name: '本部门的公文'
					},
					{
						name: '分发给我的公文'
					}
				],
				lxShow: false,
				gwlxT: "全部",
				gwlx: [{
					name: '非行政规范化文件'
				}, {
					name: '一般行政规范化文件'
				}, {
					name: '重要行政规范化文件'
				}],
			};
		},
		mounted() {

		},
		methods: {
			onSelect(item) {
				this.xlShow = false;
				Toast(item.name);
			},
			onSelect2(item) {
				this.lxShow = false;
				Toast(item.name);
			},
			formatDate(date) {
				return `${date.getMonth() + 1}/${date.getDate()}`;
			},
			onConfirm(date) {
				const [start, end] = date;
				this.show = false;
				this.date = `${this.formatDate(start)} - ${this.formatDate(end)}`;
			}
		},
	};
</script>

<style>
	.follow {
		justify-content: center;
		align-items: center;
		text-align: center;
		margin-top: 30px;
	}

	.btn1 {
		margin-left: 50rpx;
	}

	.btn2 {
		float: right;
		margin-top: -38rpx;
	}
</style>
